<!--在歌单组件基础上进行了小幅修改-->
<template>
  <div>
    <el-card class="song-group-box-card" :body-style="{ padding: 0 }" shadow="hover">
      <div class="song-group-img" @mouseover="getShow" @mouseleave="getHide">
        <el-image style="width: 100%; border-radius: 6px" :src="pic" alt="" @mousedown="goPlayList"></el-image>
        <!-- 播放量 -->
        <span class="el-icon-headset">{{ playCount | change }}</span>
        <!-- 添加淡入淡出效果 -->
        <transition name="el-fade-in-linear">
          <div class="el-icon-caret-right" style="font-size: 40px; color: #ec4141" v-show="show" @mousedown="goPlayList"></div>
        </transition>
      </div>
      <!-- 歌单名称 -->
      <p class="song-group-info" v-if="name" @mousedown="goPlayList">{{ name }}</p>
    </el-card>
    <div v-if="showTable">
      <el-table :data="showList" stripe style="width: 891px" :show-header="false">
        <el-table-column type="index" width="30"></el-table-column>
        <el-table-column prop="name" min-width="60%" show-overflow-tooltip>
          <template slot-scope="scope">
            <span style="display: inline-block; width: 100%" @click="chooseSong(scope.row.id)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="artist" min-width="40%" align="right" show-overflow-tooltip></el-table-column>
      </el-table>
      <p @click="goPlayList">查看全部></p>
    </div>
  </div>
</template>

<script>
import { getPlayListByIdAPI } from '@/api/playListAPI.js'
import { getSongByIdAPI } from '@/api/Song.js'

import bus from '@/components/eventBus.js'

export default {
  name: 'RankingCard',
  props: {
    id: {
      type: Number,
      required: true
    },
    name: {
      type: String,
      default: ''
    },
    pic: {
      type: String,
      default: ''
    },
    playCount: {
      type: Number,
      default: 0
    },
    showTable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 控制 el-icon-caret-right 的显示或隐藏
      show: false,
      playListMsg: {},
      songList: [],
      showList: []
    }
  },
  created() {
    this.getPlayList()
  },
  methods: {
    // 鼠标经过，显示 el-icon-caret-right
    getShow() {
      this.show = true
    },
    // 鼠标离开，隐藏 el-icon-caret-right
    getHide() {
      this.show = false
    },
    // 路由跳转到对应的歌单页面
    goPlayList() {
      this.$router.push({
        path: '/playlist',
        query: {
          id: this.id
        }
      })
    },
    // 获取歌单详情
    async getPlayList() {
      const {
        data: { playlist: res }
      } = await getPlayListByIdAPI(this.id)
      this.playListMsg = res
      // 获取歌单前五首歌曲
      if (this.showTable === true) {
        for (let i = 0; i < 5; i++) {
          this.getSong(res.trackIds[i].id)
        }
      }
    },
    // 获取歌曲详情
    async getSong(ids) {
      // 歌曲详情
      const {
        data: { songs: res }
      } = await getSongByIdAPI(ids)
      // 将歌曲详情存入列表
      this.songList.push(res[0])
      // 处理展示的歌曲列表
      // 多位歌手
      let ar = ''
      for (let i = 0; i < res[0].ar.length; i++) {
        if (i !== res[0].ar.length - 1) {
          ar = ar + res[0].ar[i].name + ' / '
        } else {
          ar = ar + res[0].ar[i].name
        }
      }
      // 是否具有别名
      if (res[0].alia[0]) {
        let showSongItem = {
          id: res[0].id,
          name: res[0].name + `(${res[0].alia[0]})`,
          // artist: res[0].ar[0].name
          artist: ar
        }
        this.showList.push(showSongItem)
        ar = ''
      } else {
        let showSongItem = {
          id: res[0].id,
          name: res[0].name,
          // artist: res[0].ar[0].name
          artist: ar
        }
        this.showList.push(showSongItem)
        ar = ''
      }
    },
    chooseSong(id) {
      bus.$emit('songId', id)
    }
  }
}
</script>

<style lang="less" scoped>
.song-group-box-card {
  width: 206px;
  cursor: pointer;
  .song-group-img {
    position: relative;
    height: 206px;
    .el-icon-headset {
      position: absolute;
      top: 5px;
      right: 5px;
      font-size: 12px;
      color: #fff;
    }
    // 在歌单组件基础上修改样式
    .el-icon-caret-right {
      position: absolute;
      top: 50%;
      margin-top: -20px;
      left: 50%;
      margin-left: -20px;
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.6);
      border-radius: 20px;
    }
  }
  .song-group-info {
    padding: 2px 5px;
    font-size: 14px;
    text-align: left;
  }
}
/deep/.el-table {
  .el-table__body-wrapper {
    .el-table__cell {
      padding: 5px 0;
      font-size: 12px;
    }
  }
}
p {
  margin-top: 3px;
  font-size: 12px;
  color: #676767;
  text-align: left;
  cursor: pointer;
  &:hover {
    color: #373737;
  }
}
</style>
